import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:syn_4s/core/extension/build_context_extension.dart';
import 'package:syn_4s/core/extension/int_extension.dart';
import 'package:syn_4s/core/services/login_request.dart';
import 'package:syn_4s/core/viewmodel/reset_view_model.dart';
import 'package:syn_4s/ui/widgets/custom_ui.dart';

import '../../../core/services/config.dart';
import '../../../core/utils/dialog_utils.dart';
import '../../../core/utils/toast_utils.dart';
import '../../../generated/l10n.dart';
import '../../shared/app_theme.dart';
import '../../widgets/gradient_button.dart';

class ResetPwContent extends StatelessWidget {
  ResetViewModel vm = Get.find<ResetViewModel>();

  ResetPwContent({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        decoration: const BoxDecoration(
            gradient: LinearGradient(
                colors: [Color(0xff0C558A), Color(0xff07233D)],
                begin: Alignment.centerLeft,
                end: Alignment.centerRight)),
        padding: EdgeInsets.only(left: 12.px, right: 12.px, top: 38.px),
        child: SingleChildScrollView(child: Column(
          children: buildColumnChildren(context),
        )),
      ),
    );
  }

  List<Widget> buildColumnChildren(BuildContext context) {
    return [
      buildBack(context),
      SizedBox(
        height: 45.px,
      ),
      Image.asset(
        "assets/images/logo.png",
        width: 260.px,
        height: 40.px,
      ),
      SizedBox(
        height: 6.px,
      ),
      Text(
        "Smart Site Safety System (4S)",
        style: TextStyle(
            fontSize: 22.px, color: Colors.white, fontFamily: 'Oswald'),
      ),
      SizedBox(
        height: 32.px,
      ),
      Container(
        padding: EdgeInsets.only(left: 12.px, right: 12.px, top: 24.px),
        decoration: BoxDecoration(
            color: AppTheme.loginContentColor,
            shape: BoxShape.rectangle,
            border: Border.all(color: AppTheme.orangeColor),
            boxShadow: [
              BoxShadow(color: AppTheme.orangeColor, blurRadius: 8.px)
            ]),
        child: Column(
          children: [
            Container(
                padding: EdgeInsets.symmetric(horizontal: 10.px),
                child: Text(
                  context.l10n.reset_title,
                  textAlign: TextAlign.center,
                  style: const TextStyle(height: 1.0, color: AppTheme.loginTextColor),
                )),
            SizedBox(
              height: 24.px,
            ),
            buildTextField(S.of(context).new_pwd_hint,vm.pwdController),
            SizedBox(
              height: 16.px,
            ),
            Obx(() => buildTextField(S.of(context).confirm_pwd_hint, vm.confirmController,
                suffixIcon: IconButton(
                  onPressed: () {
                    vm.pwdVisible.value =
                    !vm.pwdVisible.value;
                  },
                  icon: Icon(
                    vm.pwdVisible.value
                        ? Icons.visibility
                        : Icons.visibility_off,
                    color: AppTheme.orangeColor,
                  ),
                ))),
            buildButton(context),
          ],
        ),
      ),
    ];
  }

  Widget buildTextField(String hintText,  TextEditingController controller,
      {Widget? suffixIcon}) {
    return Stack(children: [
      TextField(
        controller: controller,
        style: TextStyle(fontSize: 20.px),
        decoration: InputDecoration(
            contentPadding:
            EdgeInsets.only(top: 12.px, bottom: 12.px,right: 12.px,left: 18.px),
            filled: true,
            fillColor: Colors.white,
            hintText: hintText,
            enabledBorder: getWhiteOvalBorder(),
            focusedBorder: getFocusedBorder(),
            suffixIcon: suffixIcon),
      ),
      Positioned(
        top: 12.px,
        left: 12.px,
        child: const Text(
          "*",
          style: TextStyle(color: Colors.red),
        ),
      ),
    ]);
  }

  Widget buildButton(BuildContext context) {
    return GradientButton(
        margin: EdgeInsets.only(top: 32.px, bottom: 20.px),
        onPressed: () {
          confirm(context);
        },
        child: Text(
          S.of(context).confirm,
          style: TextStyle(color: Colors.white, fontSize: 20.px),
        ));
  }

  Widget buildBack(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Get.back();
      },
      child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
        Icon(
          Icons.chevron_left,
          color: Colors.white,
          size: 32.px,
        ),
        Text(context.l10n.back_login,
            style: TextStyle(color: Colors.white, fontSize: 20.px))
      ]),
    );
  }

  void confirm(BuildContext context) {
    if (vm.pwdController.text.isEmpty) {
      ToastUtils.showToast(S.of(context).p_new_pwd_hint);
      return;
    }
    if (vm.confirmController.text.isEmpty) {
      ToastUtils.showToast(S.of(context).p_confirm_pwd_hint);
      return;
    }
    FocusScope.of(context).requestFocus(FocusNode());
    if (Get.arguments == null) {
      return;
    }
    DialogUtils.loading(context);
    LoginRequest.resetPw(Get.arguments, vm.pwdController.text, vm.confirmController.text)
        .then((value) {
      DialogUtils.closeDialog(context);
      ToastUtils.showToast(value.message ?? "");
      if (value.status == HttpConfig.success) {
        Navigator.pop(context);
      }
    }).catchError((value) {
      DialogUtils.closeDialog(context);
      ToastUtils.showToast(context.l10n.network_error);
    });
  }
}
